<template>
  <div class="ab-container">
    <div class="slot-wrapper">
      <slot></slot>
    </div>

    <div v-if="show" class="dialog-inner">
      <div tabindex="0" v-click-outside="handleFocusOut" class="dialog-container">
        <slot name="dialog"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const { type , show=false } = defineProps(['type' , 'show'])
const emit = defineEmits(['update:show'])



const handleFocusOut = () => {
  emit('update:show', false)
}



</script>

<style scoped lang="less">
.ab-container {
  position: relative;
  display: inline-block; /* 让容器只包裹 slot 内容 */

  .slot-wrapper {
    display: inline-block; /* slot 内容撑开大小 */
  }

  .dialog-inner {
    position: absolute;
    top: 100%; /* 紧贴在 slot 下方 */
    left: 50%; /* 先靠左 50% */
    transform: translateX(-50%); /* 再水平居中 */
    margin-top: 15px; /* 与 slot 之间留间距 */
    //width: 200px;
    background-color: white;
    z-index: 100;
    padding: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    display: inline-block;


    .dialog-container {

    }
  }

  .dialog-inner::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent white transparent;
  }
}
</style>
